<template>
  <div class="container">
    <div class="profileBgc"></div>
    <div class="contentContainer">
      <div class="aside">
        <div class="menuItem profileCenter">个人中心</div>
        <div class="menuItem" v-for="(item,index) in menuItemList" :key="index"
        :class="{'menuChoose': index === choose}" @click="menuItemClick(index)">
          {{item}}
        </div>
      </div>
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
      menuItemList: ['首页', '个人资料', '账号设置', '我的动态', '我的成就', '关注/收藏'],
      choose: 0,
      pageMap: {
        0: '/profile/home',
        1: '/profile/basicinfo',
        2: '/profile/account',
        3: '/profile/mymoment',
        4: '/achievement',
        5: '/profile/focus?tab=focus'
      }
    }
  },
  methods: {
    menuItemClick (index) {
      this.choose = index
      this.$router.push(this.pageMap[index])
    }
  },
  created () {
    this.$bus.$on('profile', (index) => {
      this.choose = index
    })
  }
}
</script>

<style scoped>
.container{
  background-color: #eee;
}
.profileBgc{
  width: 100%;
  background: url('https://tse1-mm.cn.bing.net/th/id/R-C.7ed57cebdd9c2adc771b3d7b03040a31?rik=kx1qYdQoe%2fxSjQ&riu=http%3a%2f%2fbpic.588ku.com%2fback_pic%2f03%2f61%2f87%2f9757a89e017d2c8.jpg!%2ffh%2f300%2fquality%2f90%2funsharp%2ftrue%2fcompress%2ftrue&ehk=nrm%2bFO%2fx1bJkNe1Gcind%2fh3JJoaNuF%2fW4rmjcUS1B%2bA%3d&risl=&pid=ImgRaw&r=0');
  background-size: 100% 100%;
  height: 60px;
}
.contentContainer{
  margin: 0 auto;
  width: 80%;
  background-color: #eee;
  display: flex;
  padding-top: 20px;
}
.aside{
  width: 200px;
  height: 100%;
  background-color: #fff;
}
.menuItem{
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align:center;
  cursor: pointer;
}
.menuItem:hover,.menuChoose{
  background-color: #f0f0f5;
}
.main{
  width: 100%;
  background-color: #fff;
  margin-left: 20px;
}
.profileCenter{
  cursor: default;
  color: red;
}
.profileCenter:hover{
  background-color: #fff;
}
</style>
